<template>
  <div>
    <div class="case">
      <div class="case-title">
        <span>案例展示<em>/</em></span>
        <span>case</span>
      </div>
      <div class="case-imgs">
        <div class="case-img"
          v-for="item of list"
          :key="item.id"
        >
          <img :src="item.imgUrl" class="case-img-content">
          <p class="case-img-desc">{{item.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Case',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  .case-title
    display flex
    justify-content center
    margin .3rem 0
    align-items baseline
    em
      position relative
      top .04rem
      font-size .34rem
    span
      &:first-child
        font-size .26rem
        font-weight bold
      &:last-child
        font-size .20rem
        text-align center
        color #47B365
        margin-left .05rem
  .case-imgs
    display flex
    flex-direction column
    justify-content center
    align-items center
    .case-img
      .case-img-content
        border-radius 6px
        width 3rem
        height 2.2rem
      .case-img-desc
        display flex
        justify-content center
        font-size .16rem
        margin 0.1rem 0
</style>
